<template>
	<view class="container" :style="{ 'background':'#f5f7fa'}">
		<shopro-navbar :isBack="true" :background="{'background':'#f5f7fa'}">
			<text slot="content" class="u-flex u-flex-center u-flex-items-center" style="color: #000; width: 85%; text-align: center;padding-left: 20rpx;height: 100%;">我的地址</text>
		</shopro-navbar>
		<view class="u-m-20">
			<u-form :model="form" ref="uForm" labelPosition="left" labelWidth="80" class="form-section">
			<u-cell-group>
				<u-cell title="联系人">
					<template #value>
						<u-form-item prop="receiver">
							<u-input v-model="form.receiver" placeholder="请输入联系人名称" clearable border="none" inputAlign="right" :color="'#999'"/>
						</u-form-item>
					</template>
				</u-cell>
				<u-cell title="联系方式">
					<template #value>
						<u-form-item prop="mobile">
							<u-input v-model="form.mobile" placeholder="请输入联系方式" clearable border="none" inputAlign="right" :color="'#999'"/>
						</u-form-item>
					</template>
				</u-cell>
				<u-cell title="所在地区">
					<template #value>
						<view @click="isVisible = true" class="u-flex u-flex-items-center">
							<text class="input region-value">{{ selsectAddress }}</text>
							<u-icon name="arrow-right" size="18" color="#999" />
						</view>
					</template>
				</u-cell>
				<u-cell title="详细地址">
					<template #value>
						<u-form-item prop="address">
							<u-input v-model="form.address" placeholder="请输入详细地址" clearable border="none" :color="'#999'"/>
						</u-form-item>
					</template>
				</u-cell>
			</u-cell-group>
		</u-form >
		</view>
		<!-- 保存按钮 -->
		<view class="save-btn-wrap">
			<view class="save-btn u-flex u-flex-center u-flex-items-center" @click="onSave">保 存</view>
		</view>
		<view class="choose-area">
			<view v-if="isVisible" class="overlay"></view>
			<view :class="['picker-container', isVisible ? 'slide-up' : 'slide-down']">
				<view class="picker-actions">
					<text class="btn-cancel" @tap="cancelSelection">取消</text>
					<text class="btn-confirm" @tap="confirmSelection">确定</text>
				</view>
				<picker-view class="picker-view" :value="pickerValue" @change="handlePickerChange">
					<picker-view-column>
						<view v-for="(province, index) in provinces" :key="index" class="picker-item">{{ province.name }}</view>
					</picker-view-column>
					<picker-view-column>
						<view v-for="(city, index) in cities" :key="index" class="picker-item">{{ city.name }}</view>
					</picker-view-column>
					<picker-view-column>
						<view v-for="(area, index) in areas" :key="index" class="picker-item">{{ area.name }}</view>
					</picker-view-column>
				</picker-view>
			</view>
		</view>
	</view>
</template>

<script>
import { record } from '@/api'
export default {
	data() {
		return {
			form: {
				receiver: '',
				mobile: '',
				province_id: '',
				city_id: '',
				county_id: '',
				address: ''
			},
			selsectAddress: '',
			provinceId: '0',
			cityId: '1',
			areaId: '2',
			provinces: [],
			cities: [],
			areas: [],
			pickerValue: [0, 0, 0],
			isVisible: false
		};
	},
	methods: {
		getMyAddress () {
			record.getUserArea({}).then((res) => {
				if (res.response.data.code == 1) {
					const addressInfo = res.response.data.data;
					this.form.receiver = addressInfo.receiver;
					this.form.mobile = addressInfo.mobile;
					this.form.address = addressInfo.address;
					this.selsectAddress = addressInfo.province_name + addressInfo.city_name + addressInfo.county_name;
					this.form.province_id = addressInfo.province_id;
					this.form.city_id = addressInfo.city_id;
					this.form.county_id = addressInfo.county_id;
				}
			})
		},
		getProvinceList () {
			record.getAreaList({
				pid: this.provinceId
			}).then((res) => {
				if (res.response.data.code == 1) {
					this.provinces = res.response.data.data;
					console.log(this.provinces, 'provinces');
					this.getCityList();
				}
			})
		},
		getCityList () {
			record.getAreaList({
				pid: this.cityId
			}).then((res) => {
				if (res.response.data.code == 1) {
					this.cities = res.response.data.data;
					this.areaId = this.cities[this.pickerValue[1]].id;
					this.getAreaList();
					console.log(this.cities, 'cities');
				}
			})
		},
		getAreaList () {
			record.getAreaList({
				pid: this.areaId
			}).then((res) => {
				if (res.response.data.code == 1) {
					this.areas = res.response.data.data;
					console.log(this.areas, 'areas');
					this.getMyAddress();
				}
			})
		},
		handlePickerChange(e) {
			const [provinceIndex, cityIndex, areaIndex] = e.detail.value;
			this.pickerValue = [provinceIndex, cityIndex, areaIndex];
			this.cityId = this.provinces[provinceIndex].id;
			this.getCityList();
		},
		confirmSelection() {
			this.form.province_id = this.provinces[this.pickerValue[0]].id;
			this.form.city_id = this.cities[this.pickerValue[1]].id;
			this.form.county_id = this.areas[this.pickerValue[2]].id;
			this.selsectAddress = this.provinces[this.pickerValue[0]].name + this.cities[this.pickerValue[1]].name + this.areas[this.pickerValue[2]].name;
			this.isVisible = false;
		},
		cancelSelection() {
			this.isVisible = false;
		},
		onSave() {
			record.saveUserArea(this.form).then((res) => {
				if (res.response.data.code == 1) {
					uni.showToast({
						title: '保存成功',
						icon: 'success',
					});
				}
			})
		}
	},
	mounted() {
		this.getProvinceList();
	}
}
</script>

<style lang="scss">
.container {
	min-height: 100vh;
	background: #f7f8fa;
	padding: 0 0 40rpx 0;
}
.header {
	background: #fff;
}
.form {
	margin: 40rpx 24rpx 0 24rpx;
	background: #fff;
	border-radius: 16rpx;
	box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.03);
	padding: 0 0 24rpx 0;
}
.form-item {
	display: flex;
	align-items: center;
	padding: 32rpx 24rpx 0 24rpx;
	font-size: 32rpx;
	border-bottom: 1rpx solid #f0f0f0;
	position: relative;
}
.label {
	flex: 0 0 180rpx;
	color: #333;
}
.input {
	flex: 1;
	color: #666;
	font-size: 32rpx;
	background: transparent;
	border: none;
}
.region-value {
	color: #999;
}
.address-item {
	border-bottom: none;
	padding-bottom: 32rpx;
}
.textarea {
	width: 100%;
	min-height: 80rpx;
	font-size: 32rpx;
	color: #666;
	border: none;
	background: transparent;
	resize: none;
}
.save-btn {
	width: 90%;
	margin: 80rpx auto 0 auto;
	background: #1677ff;
	color: #fff;
	font-size: 36rpx;
	border-radius: 60rpx;
	height: 96rpx;
	line-height: 96rpx;
	text-align: center;
	box-shadow: 0 4rpx 16rpx rgba(22,119,255,0.08);
}
::v-deep .u-cell{
	margin-top: 20rpx;
	border-bottom: 0;
	background: #fff;
	border-radius: 12rpx;
}
::v-deep .u-line{
	display: none!important;
}
::v-deep .u-form-item__body{
	padding: 0!important;
}
.save-btn-wrap {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 24rpx;
	padding: 0 32rpx;
	z-index: 10;
	.save-btn{
		width: 95%;
		margin: 0 auto;
		height: 80rpx;
		border-radius: 34rpx;
		background: #1664FF;
		box-shadow: 0px 2px 4px 0px rgba(22,100,255,0.5);
		color: #fff;
	}
}
.overlay {
	width: 100%;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0.6);
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10;
}

.picker-container {
	width: 100%;
	position: fixed;
	bottom: 0;
	left: 0;
	background-color: #fff;
	transition: all 0.3s;
	z-index: 11;
}

.picker-view {
	height: 250px;
	width: 100%;
}

.picker-item {
	text-align: center;
	font-size: 16px;
}

.picker-actions {
	display: flex;
	justify-content: space-between;
	padding: 10px 20px;
	border-bottom: 1px solid #eee;
	background-color: #f8f8f8;
}

.btn-cancel,
.btn-confirm {
	font-size: 16px;
	color: #007aff;
	cursor: pointer;
}

.slide-up {
	bottom: 0;
}

.slide-down {
	bottom: -300px;
}
</style>
